import React, { useState, useEffect } from 'react'
import { Checkbox } from 'antd-mobile'
import './index.less'

const CheckboxItem = Checkbox.CheckboxItem;

export default function SelfCheckBox({ data, handleChange }) {
  const [arr, setArr] = useState([])
  const [valueArr, setValueArr] = useState([])
  function onChange(e, v) {
    arr.find(i => i === e) ? arr.splice(arr.findIndex(item => item === e), 1) : arr.push(e)
    valueArr.find(i => i === v) ? valueArr.splice(valueArr.findIndex(item => item === v), 1) : valueArr.push(v)
    handleChange(arr, valueArr)
  }
  return (
    <div className="SelfCheckBox">
        {data.map(i => (
          <CheckboxItem 
            className="checkBox-item"
            key={i.value}
            onChange={() => onChange(i.name, i.value)}>
            {i.name}
          </CheckboxItem>
        ))}
    </div>
  );
}
